<template>
	<div class="found padding">
		<div class="ip-list" v-load-more="loaderMore">
			<div class="il-card" v-for="item in res_data" :key="item.ip_id">
				<div class="ilc-title">
					<router-link class="user" tag="div" :to="`/aip/${item.ip_id}`">
						<span class="avatar">
							<img :src="imgBaseUrl+item.pic" v-if="item.head_img != ''">
							<svg class="icon-svg" v-else>
								<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
							</svg>
						</span>{{ item.ip_name }}
					</router-link>
					<div class="subs">
						<div class="subs-btn" v-if="item.store!=1" @click="followFn(item)">
							+订阅
						</div>
						<div class="subs-txt" v-else>
							<svg class="icon-svg">
								<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#subs"></use>
							</svg>
							已订阅
						</div>
					</div>
				</div>
				<div class="ilc-con">
					<ul>
						<router-link class="user" tag="li" :to="`/player/${videoCard.aid}`" v-if="!item.list.length<3" v-for="videoCard in item.list" :key="videoCard.aid">
							<div class="img">
								<img :src="imgBaseUrl+videoCard.pic"/>
							</div>
							<div class="title">
								{{videoCard.title}}
							</div>
						</router-link>
					</ul>
				</div>
			</div>
		</div>

		<p v-if="showLoading" class="page-infinite-loading">
			<mt-spinner type="snake"></mt-spinner>加载中...
		</p>
		<p v-if="touchend" class="no-more">
			没有更多了
		</p>
	</div>
</template>

<script>
	import { IPGethotiplist, subscriptionAdd, imgBaseUrl } from '@/api'
	import { utilStore, utilGood, utilFollow } from '@/config/mUtils'
    import {loadMore} from '@/components/common/mixin'
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: 'ip',
		data () {
			return {
				imgBaseUrl,
				res_data: [],
				imgBaseUrl,
				aid: null,
				page: 1,
				preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
				showLoading: false,
				touchend: false, //没有更多数据
			}
		},
		mounted() {
			this.getResData();
		},
        mixins: [loadMore],
		computed: {
			...mapState([
				'userInfo',
			]),
		},
		methods: {
			...mapMutations([
				'DIALOG_LOGIN',
			]),
			async getResData(){
				//获取数据
				this.showLoading = true;
				let para = {
					user_id: this.userInfo?this.userInfo.user_id:'',
					page: this.page,
				};
				let res = await IPGethotiplist(para);
				let res_data = res.data
				this.hideLoading();
				this.res_data = [...res_data];
				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data.length < 10) {
					this.touchend = true;
					return
				}
				this.preventRepeatReuqest = false;
				//开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
				// showBack(status => {
				// 	this.showBackStatus = status;
				// });
			},
			//到达底部加载更多数据
			async loaderMore(){
				if (this.touchend) {
					return
				}
				//防止重复请求
				if (this.preventRepeatReuqest) {
					return 
				}
				this.showLoading = true;
				this.preventRepeatReuqest = true;

				//数据的定位加10位
				this.page++;
				let para = {
					user_id: this.userInfo?this.userInfo.user_id:'',
					page: this.page,
				};
				let res = await IPGethotiplist(para);
				let res_data = res.data;
				this.hideLoading();
				this.res_data = [...this.res_data, ...res_data];

				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data.length < 10) {
					this.touchend = true;
					return
				}
				this.preventRepeatReuqest = false;
			},
			//开发环境与编译环境loading隐藏方式不同
			hideLoading(){
				this.showLoading = false;
			},
			// 订阅
			followFn(item){
				utilFollow(item, this, 'res_data', subscriptionAdd, 1);
			},
			
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import 'src/style/mixin';
	.il-card {
		background: #fff;
		margin: 0.4rem 0;
		.ilc-title {
			font-size: 0.6rem;
			line-height: 1.5rem;
			padding: 0.25rem;
			display: flex;
			justify-content: space-between;
			.user {
				display: flex;
				.avatar {
					width: 1.5rem;
					height: 1.5rem;
					margin-right:0.25rem;
                    border-radius: 50%;
                    overflow: hidden;
                    .icon-svg {
                        width: 100%;
                        height: 100%;
                    }
				}
			}
			.subs-btn {
				margin-top: 0.3rem;
				width: 2.5rem;
				height: 1.1rem;
				line-height: 1rem;
				border: 1px solid #ccc;
				border-radius: 0.2rem;
				text-align: center;
			}
			.icon-svg {
				fill: #f86254;
				width: 0.7rem; 
				height: 0.7rem;
				vertical-align: -.125rem;
			}
		}
		.ilc-con {
            width: 100%;
            overflow:scroll; 
			-webkit-overflow-scrolling:touch;
			ul{
				display: flex;
				width: 200%;
				li{
					width: 60%;
					margin: 0 0.2rem;
					.img {
					}
					.title {
						font-size: 0.6rem;
						line-height: 1.5rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
